// import React,{useEffect} from 'react';
// import { Pie } from '@ant-design/charts';
// import { Button } from 'antd';

// const HealthCodePie = (props:any) => {
//     const { pieData ,ButClick,pieTitle} = props
//     const datas = ()=>{
//         let gross = 0
//         pieData.map((item:any)=>{
//            return gross+=item.value
//         })
//         return gross
//     }
//     var config = {
//         width:180,
//         height:180,
//         // autoFit:true,
//         appendPadding: [10, 180, 25, 10],
//         data: pieData,
//         angleField: 'value',
//         colorField: 'name',
//         radius: 1,
//         innerRadius: 0.64,
//         label: {
//             type: 'outer',
//             content: '{name} {value}',
//             autoRotate: false,
//         },
//         statistic: {
//             title: false,
//             content: {
//                 style: {
//                     whiteSpace: 'pre-wrap',
//                     overflow: 'hidden',
//                     textOverflow: 'ellipsis',
//                     fontSize: '16px' 
//                 },
//                 content: datas()+'\n'+pieTitle,
//             },

//         },
//         color: ({ name }: any) => {
//             if (name === '正常') {
//                 return '#74cc82';
//             } else if (name === '告警') {
//                 return '#faa247';
//             }
//             return '#f95c6b';
//         }

//     };
//     useEffect(()=>{},[pieData])
//     return (
//         <div className="cardStyle">
//             <div className="titleName">
//                 <div className="titleName">防疫核验占比</div>
//                 <p>
//                     <Button size="small" onClick={()=>ButClick('sky')}>今日</Button>
//                     <Button size="small" onClick={()=>ButClick('week')}>本周</Button>
//                     <Button size="small" onClick={()=>ButClick('month')}>本月</Button>
//                 </p>
//             </div>
//             <Pie {...config} />
//         </div>
//     )
// };

// export default HealthCodePie;
import { Button } from 'antd';
import React, { useEffect } from 'react';

const HealthCodePie = (props: any) => {
    const { pieData, ButClick, pieTitle } = props
    const echarts = require('echarts');
    function getOption(pieData: any) {
        var myChart = echarts.init(document.getElementById('cardStyle'));
        const datas = () => {
            let gross = 0
            pieData.map((item: any) => {
                return gross += item.value
            })
            return gross
        }
        const option = {
            tooltip: {
                trigger: 'item'
            },
            
            title: {
                text: pieTitle + '\n' + datas(),
                left: 'center',
                top: '42%',
                textStyle: {
                    color: '#031f2d',
                    //   fontSize:20*scale,
                    align: 'center'
                }
            },
            legend: {
                orient: 'vertical',
                right: 0,
                top: 40,
                bottom: 20,
            },
            label: {
                formatter: function (data: any) {
                    let name = data.data.name + '  ' + data.data.value
                    return name
                }
            },
            color: ['#74cc82', '#faa247', '#f95c6b'],
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    data: pieData
                }
            ]
        };

        option && myChart.setOption(option);
    }
    useEffect(() => {
        getOption(pieData)
    }, [pieData, pieTitle])
    return (
        <div className="cardStyle">
            <div className="titleName">
                <div className="titleName">防疫核验占比</div>
                <p>
                    <Button size="small" onClick={() => ButClick('sky')}>今日</Button>
                    <Button size="small" onClick={() => ButClick('week')}>本周</Button>
                    <Button size="small" onClick={() => ButClick('month')}>本月</Button>
                </p>
            </div>
            <div id='cardStyle' style={{ width: '100%', height: '100%' }}></div>
        </div>
    )
};

export default HealthCodePie;